<template>
  <div class="goods"
       :class="[layoutClass,isScroll?'isScroll':'']"
       :style="{height:goodsViewHeight}"
       @scroll="onScrollChange"
       ref="goods">
    <div class="goods-item"
         :class="layoutItemClass"
         v-for="(item,index) in dataSource"
         :key="index"
         ref="goods_item"
         :style="goods_item_styles[index]"
         @click="onGoodsItemClick(item)">
      <img :src="item.img"
           class="goods-item-img"
           :style="imgStyles[index]">
      <div class="goods-item-desc">
        <div class="goods-item-desc-name text-line-2">
          <direct v-if="item.isDirect"></direct>
          <no-have v-if="!item.isHave"></no-have>
          {{item.name}}
        </div>
        <div class="goods-item-desc-data">
          <p class="goods-item-desc-data-price">¥{{item.price | priceFilter}}</p>
          <p class="goods-item-desc-data-volume">销量:{{item.volume}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NoHave from './NoHave'
import Direct from './Direct'
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    isScroll: {
      type: Boolean,
      default: false
    },
    /**
     * 1、垂直列表
     * 2、网格布局
     * 3、瀑布流布局
     */
    layoutType: {
      type: String,
      default: '2'
    }
  },
  components: {
    NoHave,
    Direct
  },
  data () {
    return {
      MAX_IMG_HEIGHT: 230,
      MIN_IMG_HEIGHT: 178,
      imgStyles: [],
      ITEM_MARGIN_SIZE: 8,
      goods_item_styles: [],
      // 垂直列表默认展示形式 goods-list goods-list-item
      // 网格列表布局 goods-grid goods-grid-item
      layoutClass: '',
      layoutItemClass: '',
      goodsViewHeight: '',
      // 页面滚动值
      scrollTopValue: -1
    }
  },
  mounted () {
    this.initLayout()
  },
  methods: {
    // 返回随机图片高度
    imgHeight () {
      let result = Math.floor(Math.random() * (this.MAX_IMG_HEIGHT - this.MIN_IMG_HEIGHT) + this.MIN_IMG_HEIGHT)
      return result
    },
    // 根据随机图片高度生成对应的图片样式数据
    initImgStyles () {
      this.dataSource.forEach(item => {
        let imgHeight = this.imgHeight() + 'px'
        this.imgStyles.push({
          height: imgHeight
        })
      })
    },
    initWaterfall () {
      let goods_item = this.$refs.goods_item
      let leftTotal = 0
      let rightTotal = 0
      if (!goods_item) return
      goods_item.forEach((item, index) => {
        let goodsItemStyle = {}
        let elHeight = item.clientHeight
        if (leftTotal <= rightTotal) {
          goodsItemStyle = {
            left: '0px',
            top: leftTotal + 'px'
          }
          leftTotal += elHeight + this.ITEM_MARGIN_SIZE
        } else {
          goodsItemStyle = {
            right: '0px',
            top: rightTotal + 'px'
          }
          rightTotal += elHeight + this.ITEM_MARGIN_SIZE
        }
        this.goods_item_styles.push(goodsItemStyle)
      })
      if (!this.isScroll) {
        this.goodsViewHeight = leftTotal >= rightTotal ? (leftTotal + 'px') : (rightTotal + 'px')
      }
    },
    /**
     * 影响布局的数据
     * 1、goodsViewHeight -》 垂直布局和网格布局高度等于100%，瀑布流高度为实际高度
     * 2、goods_item_styles 在瀑布流才会使用到
     * 3、imgStyles 在瀑布流才会使用到
     */
    initLayout () {
      this.goodsViewHeight = '100%'
      this.goods_item_styles = []
      this.imgStyles = []
      switch (this.layoutType) {
        case '1':
          this.layoutClass = 'goods-list'
          this.layoutItemClass = 'goods-list-item'
          break;
        case '2':
          this.layoutClass = 'goods-grid'
          this.layoutItemClass = 'goods-grid-item'
          break;
        case '3':
          this.layoutItemClass = 'goods-waterfall-item'
          this.layoutClass = 'goods-waterfall'
          this.initImgStyles()
          // 等待dom上树完成之后调用
          this.$nextTick(() => {
            this.initWaterfall()
          })
          break;
      }
    },
    onGoodsItemClick (val) {
      this.$emit('onGoodsItemClick', val)
    },
    onScrollChange (e) {
      this.scrollTopValue = e.target.scrollTop
    }
  },
  watch: {
    // 监听layoutType发生变化，重新执行initLayout
    layoutType () {
      this.initLayout()
    }
  },
  // 当组件被激活的时候调用
  activated () {
    this.$refs.goods.scrollTop = this.scrollTopValue
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
// 是否允许goods单独滑动
.isScroll {
  overflow: hidden;
  overflow-y: scroll;
}
.goods {
  background: $bgColor;
  &-item {
    background: white;
    padding: px2rem($marginSize);
    box-sizing: border-box;
    &-desc {
      width: 100%;
      &-name {
        font-size: px2rem($infoSize);
        line-height: px2rem(18);
      }
      &-data {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: px2rem($marginSize);
        &-price {
          font-size: px2rem($titleSize);
          color: $MainColor;
          font-weight: 500;
        }
        &-volume {
          font-size: px2rem($infoSize);
          color: $hintColor;
        }
      }
    }
  }
}
// 瀑布流
.goods-waterfall {
  position: relative;
  margin: px2rem($marginSize);
  &-item {
    position: absolute;
    width: 49%;
    border-radius: px2rem($radiusSize);
    .goods-item-img {
      width: 100%;
    }
  }
}
// 垂直
.goods-list {
  &-item {
    display: flex;
    border-bottom: px2rem(1) solid $lineColor;
    .goods-item-img {
      width: px2rem(120);
      height: px2rem(120);
    }
    .goods-item-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: px2rem($marginSize);
    }
  }
}
// 网格布局
.goods-grid {
  padding: $marginSize;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &-item {
    width: 49%;
    border-radius: px2rem($radiusSize);
    margin-bottom: px2rem($marginSize);
    .goods-item-img {
      width: 100%;
    }
  }
}
</style>